<!--
 * @Author: linjituan linjituan@revolution.com
 * @Date: 2024-11-26 00:22:01
 * @LastEditors: linjituan linjituan@revolution.com
 * @LastEditTime: 2024-11-26 17:34:55
 * @FilePath: \hm-twx-admin\src\components\commentBox\src\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import * as metaidv2api from "@/utils/metaidv2api.js";
import metaidv2Utils from "@/utils/metaidv2Utils";
import { Spin } from "ant-design-vue";
import { onMounted, ref, watch } from "vue";
import { msgPost } from "../../Post/index";

const buzzDetail: any = ref({});
const spinning = ref(false);
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});

// watch 监听props.id的变化
watch(
  () => props.id,
  (newVal) => {
    if (newVal) {
      console.log("watch id", newVal);
      queryOneBuzz();
    }
  }
);

const emit = defineEmits(["close", "showBuzzDetail"]);

const queryOneBuzz = async () => {
  spinning.value = true;
  try {
    const item: any = (await metaidv2api.queryOneBuzz(props.id)) || {};
    console.log("queryOneBuzz 1", item);
    const data = item.data || {};
    await metaidv2Utils.handleBuzz(data);
    console.log("queryOneBuzz", data);
    buzzDetail.value = data;
    spinning.value = false;
  } catch (error) {
    console.log("queryOneBuzz error", error);
    spinning.value = false;
  }

  console.log("buzzDetail", buzzDetail.value);
};

function closeEvent() {
  emit("close");
}

function showBuzzDetail(id) {
  emit("showBuzzDetail", id);
}

onMounted(() => {
  if (props.id) {
    queryOneBuzz();
  }
});
</script>

<template>
  <div class="comment-box-wrapper">
    <div class="header">
      <div class="name">Buzz Detail</div>
      <div class="close-icon">
        <i class="iconfont icon-guanbi" @click="closeEvent"></i>
      </div>
    </div>
    <div class="content">
      <Spin :spinning="spinning">
        <div class="main-item">
          <msgPost
            v-if="buzzDetail.id"
            isComment
            :pinInfo="buzzDetail"
            @showBuzzDetail="showBuzzDetail"
          ></msgPost>
        </div>
        <div class="body-item">
          <div class="title">Comment</div>
          <div class="comment-list">
            <div
              v-if="buzzDetail.commentList && buzzDetail.commentList.length > 0"
            >
              <div
                class="comment-item"
                v-for="item in buzzDetail.commentList"
                :key="item.id"
              >
                <msgPost
                  :pinInfo="item"
                  isComment
                  @showBuzzDetail="showBuzzDetail"
                ></msgPost>
              </div>
            </div>
            <div class="no-data-tip" v-else>
              No comments available at the moment
            </div>
          </div>
        </div>
      </Spin>
    </div>
    <div class="footer"></div>
  </div>

  <div class="model-wrap" @click="closeEvent"></div>
</template>

<style lang="less" scoped>
.comment-box-wrapper {
  position: fixed;
  top: 0;
  top: 50%;
  left: 0;
  left: 50%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  width: 45%;
  max-height: 95%;
  overflow: hidden;
  background-color: #fff;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  border-radius: 20px;
  // 页面居中
  transform: translate(-50%, -50%);

  .header {
    position: relative;
    padding: 15px 0;
    text-align: center;
    border-bottom: 1px solid #e8e8e8;

    .name {
      font-size: 16px;
      font-weight: bold;
    }

    .close-icon {
      position: absolute;
      top: 0;
      right: 20px;
      display: flex;
      align-items: center;
      height: 100%;
      cursor: pointer;

      i {
        font-size: 30px;
      }
    }
  }

  .content {
    flex: 1;
    overflow: auto;
  }

  .body-item {
    .title {
      padding: 10px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .comment-list {
    padding: 10px 20px;

    .comment-item {
      padding: 10px 0;
    }
  }

  .no-data-tip {
    padding-bottom: 20px;
    text-align: center;
  }
}

.model-wrap {
  position: fixed;
  inset: 0;
  z-index: 998;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.7;
}
</style>